<template>
  <div class="dashboard-container" id="dashboard">
    <!-- <div class='dashboard-text'>{{name}}，欢迎回来！ 上次登陆时间：2017-11-29 12:21:26</div> -->
    <!-- <div class='dashboard-text'>role:<span v-for='role in roles' :key='role'>{{role}}</span></div> -->
    <el-row :gutter="20" class="top1">
      <el-col :span="8">
        <div @click="goTOOrder('first')" class="top1_title">今日订单</div>
        <div  @click="goTOOrder('first')"  class="top1_count">{{top1Data.todayOrder}}</div>
      </el-col>
      <el-col :span="8">
        <div  @click="goTOOrder('third')" class="top1_title">待处理</div>
        <div  @click="goTOOrder('third')" class="top1_count">{{top1Data.needHandle}}</div>
      </el-col>
      <el-col :span="8">
        <div  @click="goTOOrder('firth')" class="top1_title">已处理</div>
        <div  @click="goTOOrder('firth')" class="top1_count">{{top1Data.complete}}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="top2">
      <el-col :span="12">
        <div id="sellerRate" :style="{width: '100%',marginTop:'20px', height: '400px'}"></div>
      </el-col>
      <el-col :span="12">
        <div id="sevenDaysOrders" :style="{width: '100%',marginTop:'20px', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import { getToken } from '@/utils/auth'
  import dateFormat from '@/utils/date'
  import { mapGetters } from "vuex";
  import { getTodayOrder } from '@/api/order'
  import { getSellerServer } from '@/api/seller'
  export default {
    name: "dashboard",
    data() {
      return {
        top1Data: {
          todayOrder: "0",
          needHandle: "0",
          complete: "0"
        },
        user_id: "",
        weekContainer: ["", "", "", "", "", "", ""],
        orderData:[0, 0, 0, 0, 0, 0, 0],
        userServer:{}
      };
    },
    mounted() {
        this.getServer()
      this.getWeekData()
      this.getWeekCount()
     
     
    },
    computed: {
    ...mapGetters(["name", "roles"])
    },
    created() {
      this.$nextTick(() => {
        this.user_id = getToken()
        this.getTodayInformation()
      })

    },
    methods: {
      goTOOrder(type){
        this.$router.push({path:`/order/index?type=${type}`})
      },
      getServer(){
        let id = this.user_id
        getSellerServer(id).then((res)=>{
        
             if(res.message=="ok"){
                 this.userServer = res.seller[0]
                 
             }
        })
      },
      getTodayInformation() {
        let id = this.user_id
        var today = new Date();
        today.setHours(0);
        today.setMinutes(0);
        today.setSeconds(0);
        today.setMilliseconds(0);
        let beginToday = today.getTime()
        let endToday = beginToday + (86400 * 1000);

        getTodayOrder(id, beginToday, endToday).then((res) => {
          if (res.message == "ok") {
            this.top1Data.todayOrder = res.sumCount[0].count
            this.top1Data.needHandle = res.needHandle[0].count
            this.top1Data.complete = res.complete[0].count
          }
        })
      },
      getWeekCount() {
        let id = this.user_id
        this.weekContainer.forEach((startTime,index) => {
         
          let newstartTime = new Date(startTime).getTime()
          let endtime = newstartTime + (86400 * 1000);
          let newEndTime = new Date(endtime)
           getTodayOrder(id, newstartTime, endtime).then((res) => {
            if (res.message == "ok") {
              this.orderData[index] = res.sumCount[0].count+1
                 this.draw();
            }
          })
        })
        
      },
      getWeekData() {
        var today = new Date();
        today.setHours(0);
        today.setMinutes(0);
        today.setSeconds(0);
        today.setMilliseconds(0);
        let beginToday = today.getTime()

        this.weekContainer = this.weekContainer.map((item, index) => {
          let weekTime = (beginToday * 1 - 86400 * 7000) + (86401 * index * 1000)
          let time = new Date(weekTime)
          item = dateFormat(time, 'yyyy-MM-dd')
          return item
        })
      },
      draw() {
        let weekCount = this.weekContainer
        let orderData = this.orderData
        let server =this.userServer 
        let myChart1 = this.$echarts.init(
          document.getElementById("sevenDaysOrders")
        );
        myChart1.setOption({
          title: { text: "近7日订单统计" },
          tooltip: {},
          xAxis: {
            data: weekCount
          },
          yAxis: {},
          series: [
            {
              name: "订单数",
              type: "bar",
              data: orderData
            }
          ]
        });
        let myChart2 = this.$echarts.init(document.getElementById("sellerRate"));
        myChart2.setOption({
          title: { text: "商家评分" },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: "#999999"
              }
            },
            splitArea: {
              areaStyle: {
                color: ["#fff", "#fff", "#fff", "#fff"],
                shadowColor: "rgba(0, 100, 0, 0.3)"
              }
            },
            indicator: [
              { name: "速度", max: 5 },
              { name: "信用", max: 5 },
              { name: "评价", max: 5 },
              { name: "销量", max: 1000 }
            ]
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [server.score, server.serviceScore, server.score, server.sellCount],
                  name: "数据",
                  itemStyle: {
                    normal: {
                      color: "rgba(5, 128, 242, 0.8)"
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: "#0580f2"
                    }
                  }
                }
              ]
            }
          ]
        });
      }
    }
  };

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 20px;
      line-height: 40px;
      color: #333;
    }
  }
  
  #dashboard {
    .top1 {
      display: flex;
      .todayTotal {
        width: 200px;
        height: 150px;
      }
    }
  }
  
  .top1 {
    width: 100%;
    text-align: center;
    .top1_title {
      background-color: #999;
      height: 70px;
      line-height: 70px;
      font-size: 18px;
      color: #fff;
    }
    .top1_count {
      background-color: #eee;
      line-height: 60px;
      font-size: 30px;
      color: #666;
      font-weight: 700;
      cursor: pointer;
    }
  }
</style>